<template>
  <div id="gen">
    <!-- <div class="activity" id="fname" >
      <div id="text" @click="num=fid" :class="{active:num==fid}" v-for="{fid,fname} in data" :key="fid" >
          {{fname}} 
          
      </div>
    </div> -->


    <!-- 导航栏 -->
    <van-tabs v-model="selected" animated>
      <van-tab v-for="item in data"  :key="item.fid" :title="item.fname">
          <!-- 标题页 子组件 
          把获取到的数据 传给子组件
          绑定事件 把获取的标题页id传给兄弟组件 -->
        <detail
          :activity="item"
          @click.native="$router.push(`/content?cid=${item.aid}`)"
          v-for="item in activity" 
          :key="item.aid"/>
      </van-tab>
    </van-tabs>
    


  </div>
</template>

<script>
// import Content from '@/components/content.vue'
import detail from '../components/detail.vue'
  export default {
  components: {  detail },
    data() {
      return {
        selected:0,
        data: [],
        activity:[],
        num:10,
      }
    },

    
    
    mounted(){
      this.getData()
      this.getActivity() 
    },


    methods: {
      getData() {
        var url =  `http://127.0.0.1:3000/aier/activity/aier_activity_family`
        console.log(url);
        this.axios.get(url).then(res=>{
          console.log(res);
          this.data= res.data
        })
      },

      getActivity() {
        var url =  `http://127.0.0.1:3000/aier/activity/aier_activity?aier_activity_familyid=0`
        console.log(url);
        this.axios.get(url).then(res=>{
          console.log(res);
          this.activity = res.data
        })
      },
    },

    // 监听导航项id 一有变化重新渲染页面 
     watch:{
      selected(to,from){
        console.log(`从${from}切换到了${to}`);
        this.axios.get(`http://127.0.0.1:3000/aier/activity/aier_activity?aier_activity_familyid=${to}`).then(res=>{
          console.log(res);
          this.activity = res.data
        })
      }
     }
    }
  

</script>

<style lang="scss" scoped>
::v-deep .van-tab--active {
    color: #36c14c;
  
}

::v-deep .van-tabs__line{
  background-color: #36c14c; 
}



 #gen{
  // position:relative;
 }

 #mint-ui{
  // width: 100%;
  // position: absolute;
  // top:0px;
  
 }

 #fname{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  margin-top: 20px;

    #text{
      font-size:14px;
    }
 }

 .active{
  color: #36c14c;
 }
</style>